Summary

Two refactoring commits that improve the icons infrastructure:

1. Replace tuple-based custom icons with build-time JSX components

• generate-custom-index.ts: Instead of generating iconNode arrays (tuples of [tagName, attributes]) that get rendered at runtime via React.createElement, we now generate .tsx files with actual JSX path components that accept a color prop
• wrapCustomIcon.tsx: Simplified — no longer iterates over tuples to create elements; just renders the PathsComponent directly
• svg2jsx.js: Extracted convertSvgAttrName as a named export so the custom icon generator can reuse it
• Removed svgson dependency — no longer needed since we work with raw SVG strings converted to JSX at build time instead of parsing into an AST

2. Simplify icons gallery by replacing react-window with flexbox

• Removed react-window Grid and all associated complexity: resize event handlers, column count calculations, CellRenderer wrapper, container width tracking via refs
• Replaced with simple flexbox layout using .map(), matching how the legacy icons page worked — the icon set is not large enough to need virtualisation
• Fixed laggy search: typing is now instant (immediate update when extending the query), debounce only kicks in when deleting characters (which reveals more icons and triggers heavier re-renders)
• Made TextInput uncontrolled: removed the dual searchInput/searchQuery state that was causing the input to feel sluggish
• Removed unused IconSource type and source field from IconInfo
• Minor perf: hoisted toLowerCase() out of the filter loop

Reasoning

• Tuple → JSX: The tuple-based iconNode format added runtime overhead and complexity (manual React.createElement calls, gradient ID injection via string matching). Generating JSX at build time is simpler, more idiomatic React, and lets the bundler optimise the output
• react-window removal: The icons gallery has ~200 icons — well within what the browser can handle without virtualisation. react-window added significant complexity (resize observers, column math, fixed cell sizes) for no measurable benefit, and made the layout less flexible
• Search debounce fix: The previous implementation debounced all keystrokes equally, making typing feel unresponsive. The new approach recognises that narrowing results (typing more) is cheap while widening results (deleting) is expensive

Test plan

• Run pnpm run bootstrap to regenerate custom icons (verifies the new .tsx generation)
• Run dev server (pnpm run dev) and verify icons gallery loads correctly
• Test search: typing should feel instant, deleting should have a slight debounce
• Verify custom icons (AI icons) render correctly, including the gradient variant
• Check RTL toggle still works
• Click an icon tile to verify the detail popover still appears

🤖 Generated with Claude Code